<script setup>

import {computed, ref} from "vue";
import useUserStore from "@/store/modules/user";
import SysUserInfo from "@/views/system/user/profile/SysUserInfo.vue";
import ResetPwd from "@/views/system/user/profile/ResetPwd.vue";
import UserAvatar from "@/views/system/user/profile/UserAvatar.vue";

const activeTab = ref("userinfo")

const userInfo = computed(() => {
  return useUserStore().user
});

const getUserInfo = async () => {
  await useUserStore().getInfo();
}

</script>

<template>
  <a-row :gutter="24">
    <a-col :span="8">
      <a-card>
        <template #title>
          <span>个人信息</span>
        </template>
        <div>
          <div class="flex justify-center mb-2">
            <user-avatar :user="userInfo" @success="getUserInfo"/>
          </div>
          <ul class="list-group">
            <li class="list-group-item">
              <div class="left">
                <icon icon="ep:user-filled" color="#000" size="20px" class="mr-1"/>
                用户名称
              </div>
              <div>{{ userInfo?.userName }}</div>
            </li>
            <li class="list-group-item">
              <div class="left">
                <icon icon="ep:phone" color="#000" size="20px" class="mr-1"/>
                手机号码
              </div>
              <div>{{ userInfo?.phonenumber }}</div>
            </li>
            <li class="list-group-item">
              <div class="left">
                <icon icon="carbon:email" color="#000" size="20px" class="mr-1"/>
                用户邮箱
              </div>
              <div>{{ userInfo?.email }}</div>
            </li>
            <li class="list-group-item">
              <div class="left">
                <icon icon="ep:phone" color="#000" size="20px" class="mr-1"/>
                所属角色
              </div>
              <div>{{ userInfo?.isRoot === 1 ? '超级管理员' : userInfo?.roleName }}</div>
            </li>
            <li class="list-group-item">
              <div class="left">
                <icon icon="ep:calendar" color="#000" size="20px" class="mr-1"/>
                创建日期
              </div>
              <div>{{ userInfo?.createTime }}</div>
            </li>
          </ul>
        </div>
      </a-card>
    </a-col>
    <a-col :span="16">
      <a-card>
        <template #title>
          <span>基本资料</span>
        </template>
        <a-tabs v-model:active-key="activeTab">
          <a-tab-pane title="基本资料" key="userinfo">
            <sys-user-info :user="userInfo" @success="getUserInfo"/>
          </a-tab-pane>
          <a-tab-pane title="修改密码" key="resetPwd">
            <reset-pwd @success="getUserInfo"/>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">

</style>
